<template>
  <div class="Index">
    <div class="mt-20 mb-20">嗨Admin，欢迎使用自嗨后台管理平台系统</div>
    <!--加载中 -->
    <!-- <Spin style="z-index:9999" fix v-if="$store.state.commLoading">
      <Icon type="ios-loading" size="18" class="loading"></Icon>
      <div>Loading</div>
    </Spin>-->
    <Row :gutter="20" class="mb-20">
      <Col :span="4" v-for="(item, index) in renderCardData" :key="index">
        <!--CountData组件 -->
        <CountData
          :title="item.title"
          :icon="item.icon"
          :background="item.background"
          @refresh="initCardDataByIndex(index)"
        >
          <!--CountNumber组件 :end增长的值-->
          <CountNumber :end="item.value" :useGrouping="true" :decimals="decimals"></CountNumber>
        </CountData>
      </Col>
    </Row>

    <Row :gutter="10">
      <Col :span="8">
        <!--饼图组件 -->
        <charts-card @on-refresh="initPieData" title="饼图">
          <!-- <template #charts="user"> -->
          <template #charts>
            <!-- {{user}} 输出的结果是对象:{ "user": { "name": "pzy", "age": 20 } }-->
            <pie-charts
              ref="pieCharts"
              :title="pieData.title"
              :sub-title="pieData.subTitle"
              :legend="pieData.legend"
              :series-name="pieData.seriesName"
            ></pie-charts>
          </template>
        </charts-card>
      </Col>
      <Col :span="16">
        <!--柱状图组件 -->
        <charts-card title="柱状图" @on-refresh="initBarData">
          <template #charts>
            <bar-charts
              ref="barCharts"
              :title="barData.title"
              :sub-title="barData.subTitle"
              :legend="barData.legend"
              :xAxis="barData.xAxis"
              :series-name="barData.seriesName"
            ></bar-charts>
          </template>
        </charts-card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import PieCharts from "./echarts/PieCharts.vue";
import BarCharts from "./echarts/BarCharts.vue";
import ChartsCard from "./echarts/ChartsCard.vue";
import CountData from "@components/iv-count/CountData.vue";
import CountNumber from "@components/iv-count/CountNumber.vue";
import { pieData, barData } from "@/data/echarts.js";
import { cardData } from "@/data/count.js";
@Component({
  components: {
    PieCharts,
    ChartsCard,
    BarCharts,
    CountData,
    CountNumber
  }
})
export default class Index extends Vue {
  public $refs!: {
    pieCharts: any;
    barCharts: any;
  };
  private pieData: any = pieData;
  private barData: any = barData;
  private renderCardData: any = [];

  private decimals: number = 0;

  private initCardData() {
    cardData.map((item, index) => {
      return this.initCardDataByIndex(index);
    });
    this.renderCardData = cardData;
  }

  private initCardDataByIndex(index) {
    const data = cardData[index];
    if (data) {
      data.value = Math.floor(Math.random() * 1000);
    }
  }

  private initBarData() {
    let vm = this;
    let seriesData: any = [];
    this.barData.legend.forEach(item => {
      const data: any = [];
      this.barData.xAxis.forEach(() => {
        data.push(Math.floor(Math.random() * 1000));
      });
      seriesData.push({
        name: item,
        data: data
      });
    });
    vm.$nextTick(() => {
      this.$refs.barCharts.setValue(seriesData);
    });
  }

  private initPieData() {
    let vm = this;
    let seriesData: any = [];

    this.pieData.legend.forEach(item => {
      seriesData.push({
        name: item,
        value: Math.floor(Math.random() * 1000)
      });
    });

    vm.$nextTick(() => {
      if (vm.$refs.pieCharts) {
        vm.$refs.pieCharts.setValue(seriesData);
      }
    });
  }
  created() {
    this.initCardData();
    this.initPieData();
    this.initBarData();
  }
}
</script>
<style lang="stylus" scoped></style>
